<template>
	<view class="order-index">
		<u-sticky>
			<u-subsection :list="couponStatus" :current="navbarCurrent" @change="couponStatusChange" activeColor="#FF5722" :fontSize="28" mode="button"></u-subsection>
		</u-sticky>
		<view class="order-list">
			<u-empty
			    mode="coupon"
				:iconSize="100"
			    icon="order"
				:show="!records.length"
				:marginTop="100"
				:textSize="28"
			>
			</u-empty>
			
			<view class="order-item" v-for="(item,key) in records" :key="key" @click="goCouponDetails(item.id)">
				<view class="order-item__info flex">
					<view class="title">票券名称</view>
					<view class="value">{{ item.coupon_name }}</view>
				</view>
				
				<view class="order-item__info flex">
					<view class="title">票券面值</view>
					<view class="value flex">
						<u-text :text="item.coupon_value" :size="32" :bold="true" color="#FF0000" ></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">领取时间</view>
					<view class="value">{{ item.obtain_time }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">过期时间</view>
					<view class="value">{{ item.expire_time }}</view>
				</view>
				<template v-if="item.use_type > 0">
					<view class="order-item__info flex" >
						<view class="title">使用时间</view>
						<view class="value">
							<u-text :size="32" :text="item.use_time_display"></u-text>
						</view>
					</view>
					<view class="order-item__info flex" >
						<view class="title">使用方式</view>
						<view class="value">
							<u-text :size="32" :text="item.use_type_display"></u-text>
						</view>
					</view>
				</template>
				
				<view class="order-item__status">
					<view class="unuse" v-if="item.status==1">未使用</view>
					<view class="used" v-if="item.status==2">已使用</view>
					<view class="expired" v-if="item.status==3">已过期</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" fontSize="32" :iconSize="32" line />
	</view>
</template>

<script>
	import { getUserCoupons } from '@/api/api.js'
	export default {
		data() {
			return {
				// 1=未使用 2=已使用 3=已过期 4=已作废
				couponStatus: [
					{name: '未使用', status: 1}, 
					{name: '已使用', status: 2}, 
					{name: '已过期', status: 3}
				],
				loadStatus: 'loadmore',
				filter: {
					status: 1,
					page: 1
				},
				navbarCurrent: 0,
				records: []
			}
		},
		methods:{
			couponStatusChange(index) {
				this.navbarCurrent = index
				this.filter.status = this.couponStatus[this.navbarCurrent].status
			}
			,getRecords() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				getUserCoupons(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.records = uni.$lv.array.union(this.records , _result)
					this.loadStatus = 'loadmore'
				})
			}
			,goCouponDetails(recId) {
				uni.navigateTo({
					url: `/pagesA/pages/coupon/records?id=${recId}`
				})
			}
		},
		mounted() {
			this.getRecords()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.loadStatus = 'loadmore'
			this.filter.page = 1
			this.records = []
			this.getRecords()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getRecords()
		},
		watch: {
			'filter.status': function(newVal , oldVal) {
				this.loadStatus = 'loadmore'
				this.records = []
				this.getRecords()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg-color-grey;
	}
	.order-index {
		padding-bottom: 30rpx;
		.order-list {
			padding: 30rpx;
			.order-item {
				padding: 40rpx 30rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				position: relative;
				&__info {
					.title{
						font-size: 30rpx;
						margin-right: 20rpx;
						color: $uni-text-color-placeholder;
						width: 130rpx;
						@include flex;
						align-items: center;
					}
					.value {
						font-size: 32rpx;
						color: #333;
						flex: 1;
					}
				}
				&__info:not(:last-child){margin-bottom: 20rpx;}
				&__status {
					position: absolute;
					width: 140rpx;
					height: 40rpx;
					line-height: 40rpx;
					right: 0rpx;
					top: 0rpx;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					.unuse {
						background-color: $uni-primary-main;
						border-top-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
					.expired {
						background-color: #999;
						border-top-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
					.used {
						background-color: $uni-price-color;
						border-top-right-radius: 20rpx;
						border-bottom-left-radius: 20rpx;
					}
				}
			}
			.order-item:not(:last-child){margin-bottom: 40rpx;}
		}
	}
</style>
